import React, { Component } from "react";

export default class App extends Component {
  myRef = React.createRef();

  render() {
    return (
      <div>
        <input ref="username" />
        <input ref={this.myRef} />
        <button
          onClick={() => {
            // 我们可以像vue一样，直接ref赋值为字符串，然后通过this.refs访问到，但是这种方式已经被弃用，你使用虽然感觉也没毛病，但是已经触发了react的警告
            console.log(this.refs.username);
          }}
        >
          click me
        </button>
        <button
          onClick={() => {
            // 注意myRef并不会直接就是一个DOM节点，它是一个对象，current属性对应的才是原生dom节点
            console.log(this.myRef.current, this.myRef.current.value);
          }}
        >
          click me2
        </button>
      </div>
    );
  }
}
